import { connect } from 'dva';
import React, { Component } from 'react';
import { Row, Col, Card, Tabs } from 'antd';
import { FormattedMessage } from 'umi/locale';
import styles from './Analysis.less';

const { TabPane } = Tabs;

@connect(({ chart, loading }) => ({
  chart,
  loading: loading.effects['chart/fetch'],
}))
class SalesCard extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'chart/fetch',
      });
    });
  }

  render() {
    const { chart, loading } = this.props;
    const { stores } = chart;
    return (
      <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
        <div className={styles.salesCard}>
          <Tabs
            tabBarExtraContent={<div className={styles.salesExtraWrap} />}
            size="large"
            tabBarStyle={{ marginBottom: 24 }}
          >
            <TabPane
              tab={<FormattedMessage id="app.analysis.visits" defaultMessage="Visits" />}
              key="views"
            >
              <Row>
                <Col xl={8} lg={12} md={12} sm={24} xs={24}>
                  <div className={styles.salesRank}>
                    {stores ? (
                      <ul className={styles.rankingList}>
                        {stores.map((item, i) => (
                          <li key={item.title}>
                            <span
                              className={`${styles.rankingItemNumber} ${
                                i < 3 ? styles.active : ''
                              }`}
                            >
                              {i + 1}
                            </span>
                            <span className={styles.rankingItemTitle} title={item.title}>
                              {item.name}
                            </span>
                            <span className={styles.rankingItemTitle}>
                              {`￥${item.oveRall / 100}` || 0}
                            </span>
                          </li>
                        ))}
                      </ul>
                    ) : (
                      ''
                    )}
                  </div>
                </Col>
              </Row>
            </TabPane>
          </Tabs>
        </div>
      </Card>
    );
  }
}

export default SalesCard;
